<template>
	<view class="serachbody">
		<view class="screen">
			<view class="">综合</view>
			<view class="">销量</view>
			<view class="">价格</view>
		</view>
		<view class="goodArea">
			<view class="goodAreas" v-for="v in showData" @click="goToDetails">
				<image :src="imgUrl+v.img" mode="" @error="v.img='assets/zanwu.png'"></image>
				<view>
					<text>{{v.name}}</text>
					<view class="num">
						<view>￥{{v.spjg}}</view>
						<view @click.stop="openCart(v)">
							<uni-icons type="cart" size="30" :color="v.selectCart?'rgb(226,96,31)':'black'"></uni-icons>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view>
				共 <text style="color: rgb(226,96,31);">{{cartData.length}}</text> 件商品，合计：<text style="color: rgb(226,96,31);">￥{{cartMoney}}</text>
			</view>
			<view @click="goToCart">去购物车</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<addCart :addgood="addgood"></addCart>
		</uni-popup>
	</view>
</template>

<script>
	import http from '../../until/http';
	import {reactive,toRefs,onMounted} from 'vue';
	import addCart from './addcart.vue';
	import {mapState} from 'vuex';
	export default {
		setup(){
			let data=reactive({
				imgUrl:'http://localhost:8888/getImg?sort=',
				cartData:[],
				showData:[],
				startNum:0,
				showNum:4,
				touchStartY:0,
				addgood:{},
				goodClassid:0,
				key:'',
				getData:()=>{
					
					http({
						url:'/goods/getallgoods',
						data:{startNum:data.startNum,num:data.showNum,classid:data.goodClassid,keyWord:data.key}
					}).then((res)=>{	
						data.showData.push(...res.data.data);
						data.getCartData();
					});
				},
				getCartData:()=>{
					http({
						url:'/goods/getcart'
					}).then((res)=>{
						data.cartData=res.data.data;
						data.cartData.forEach((cart)=>{
							data.showData.forEach((show)=>{
								if(cart.goodid==show.id){
									show.selectCart=true;
									return;
								}
							})
						})
					});
				},
				goToDetails:(goodData)=>{
					uni.navigateTo({
						url:'/pages/spxq/spxq'
					})
				},
				goToCart:()=>{
					uni.navigateTo({
						url:'/pages/ShoppingCart/ShoppingCart'
					})
				}
			});
			onMounted(()=> {
				data.getData();
			});
				
			return {...toRefs(data)}
		},
		computed:{
			cartMoney(){
				let money=0;
				this.cartData.forEach((item)=>{
					money+=item.goodnum*item.spjg;
				})
				return money
			},
			...mapState('good', ['goodClass'])
		},
		watch: {
		  onLoadGood() {
			this.startNum+=this.showNum;
			this.getData();
		  }
		},
		methods:{
			openCart(data){
				if(!data.selectCart){
					this.$refs.popup.open('bottom');
					this.addgood={...data};
				}
			}
		},
		created() {
			if(this.keyWord){
				this.key=this.keyWord;
			}
			if(this.goodClass>0){
				this.goodClassid=this.goodClass;
			};
		},
		components:{
			addCart
		},
		props:['onLoadGood','keyWord']
	}
</script>

<style lang="less" scoped>
	.serachbody{
		margin: 100rpx 0;
	}
	.screen{
		width: 480rpx;
		line-height: 80rpx;
		display: flex;
		justify-content:space-around;
		view{
			text-align: center;
			flex:1;
		}
	}
	.goodArea{
		width: 750rpx;
		padding: 25rpx 0;
		border-top: 1px solid rgb(242,242,242);
		display: flex;
		justify-content: space-between ;
		flex-wrap: wrap;
	}
	.goodAreas{
		background-color: rgb(242,242,242);
		margin: 10rpx 20rpx;
		padding: 10rpx;
		width: 310rpx;
		border-radius: 10rpx;
		image{
			width: 310rpx;
			height: 310rpx;
		}
		view{
			text{
				height: 90rpx;
				display: block;
			}
		}
	}
	.num{
		display: flex;
		justify-content:space-between;
		line-height: 90rpx;
		color: rgb(226,96,31);
	}
	.footer{
		background-color: rgb(242,242,242);
		width: 750rpx;
		height: 80rpx;
		border: none;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content:flex-end;	
		align-items:center;
		view:first-child{
			font-size: 14px;
		}
		view:nth-child(2){
			height: 80rpx;
			width: 200rpx;
			background-color: rgb(226,96,31);
			text-align: center;
			line-height:80rpx ;
			margin-left: 30rpx;
			color: white;
		}
	}
</style>
